/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Collapse,
    Text,Table,TableBody,TableRow,Cell,CCell,TableHead,
    useTheme,
    IconSquare,
    IconCheckSquare,
} from "customize-easy-ui-component";
import {DirectLink, } from "../../routing/Link";
import { useAreaFoldable} from "../common/helper";
import { ReportViewProps, } from "../common/base";
import {
    reportFirstPageHeadAllNmbbm, useViewReportALL,
    末尾链接,
    注意事项,
    落款单位地址,
} from "../common/rarelyVary";
import {检验设备情况, 资料审查设备, 首页设备概况nbh} from "./repView";
import Img_Seal from "../../images/seal.png";
import {multilines2Html} from "../tools";
import {VsProjects默认} from "./orcBase";
import {useSubRepMain} from "../hook/useSubRepMain";
import HashLinkObserver from "react-hash-link";
import {useRepMenuDirItems} from "../hook/useMainRepUrlOr";


//正式报告的显示打印。 默认打印A4:210X297mm纸张。 打印特别处理URL尾部加上?print=1确保全部都显示出，不要交互式可以折叠的。
//不需要每个verId新搞一个文件的，甚至不需要搞新的组件，可以只需内部逻辑处理。
//verId 实际在PeriodicalInspection.E配置文件中reportTemplate配上的。#不是路由器注入提供！！
export const ReportView: React.FunctionComponent<ReportViewProps> = ({
    repId,   source: orc,  verId,rep,
}) => {
  const theme= useTheme();
  const [[redundance,bindRedund] ] =useAreaFoldable(false,[undefined ]);
    let muluSn=1;       //目录显示项目序号
    // const THICKM_VS_Cmp= 测厚报告模板[`${THICKM_VS_Ver}` as keyof typeof 测厚报告模板];
  const [renderThickmVs]= useSubRepMain("cm/thickmVs", {nestMd:'THICKM_VS',orc, repId:repId!, rep, NestMbVer:1});
  const [renderSpectrVs]= useSubRepMain("cm/spectrVs", {nestMd:'SPECTR_VS', orc, repId:repId!, rep, NestMbVer:1});
    const [renderTofd]= useSubRepMain("cm/tofd", {nestMd:'TOFD_TS', orc, repId:repId!, rep, NestMbVer:1});
    const [rootMenu]=useRepMenuDirItems(VsProjects默认, orc.Projects, `/reportView/VS-DJ/ver/${verId}/${repId}`);
    //手机菜单可安排的：一层7位置+二层9位置。报告最多安排16个菜单。 加了, {time: Date()});：URL强制刷新！才能真正跳转成功到位置
  return (
    <React.Fragment>
        {rootMenu}
      <div css={{
            "@media not print": {
              marginTop:'1rem',
              marginBottom: '1rem'
            }
          }}
      >
       <div role="button" tabIndex={0} {...bindRedund}>
          {!(redundance) && <Text variant="h4">
               {`No：JD2020FTC00004 更多...`}
             </Text>
          }
       </div>
        <Collapse id={'1'} show={redundance} noAnimated>
          <div role="button" {...bindRedund}>
            { reportFirstPageHeadAllNmbbm({theme, No: rep.isp.no}) }
            <div css={{
                "@media print": {
                  height:'10mm'
                }
            }}>
            </div>
          </div>
        </Collapse>
        <Text variant="h3" css={{
              textAlign:'center',
              "@media (min-width:690px),print and (min-width:538px)": {
                fontSize: theme.fontSizes[6],
              }
            }}>
          压力容器定期检验报告
        </Text><br/>
          <Text variant="h5" css={{
              textAlign:'center',
          }}> （ FJB/RC-1020-0-2022 ）
          </Text>
        <div css={{
            "@media print": {
              height:'18mm'
            }
          }}>
        </div>
          <div css={{
              "@media print": {
                  minHeight: '-webkit-fill-available',
                  // maxHeight: '110mm'
              }
          }}>
              { 首页设备概况nbh( {theme, orc} ) }
          </div>
        <div role="button" tabIndex={1} {...bindRedund}>
          {!(redundance) && <Text variant="h4">
                福建省特种设备检验研究院 更多...
              </Text>
          }
        </div>
        <Collapse id={'2'} show={redundance} noAnimated>
            <div css={{
              "@media print": {
                height:'20mm'
              }
            }}>
            </div>
            <div  css={{
              textAlign:'center',
              "@media print": {
                pageBreakAfter:'always',
                pageBreakInside:'avoid'
              }
            }}>
              {落款单位地址}
            </div>

          <div role="button" {...bindRedund}>
            <Text variant="h1" css={{textAlign:'center'}}>注意事项</Text>
          </div>
            <Text variant="h4"><br/>
              1. 本报告书为依据《固定式压力容器安全技术监察规程》（TSG21-2016）制定，适用于压力容器定期检验报告的结论报告，检验结论仅代表该设备在检验时的安全状况。<br/>
            </Text>
            {注意事项}
          <div role="button" {...bindRedund}>
              <Text variant="h2" css={{textAlign:'center',
                  "@media print": {
                      pageBreakBefore: 'always',
                  },
              }}>目录</Text>
          </div>
        </Collapse>

            <div  css={ {
                "@media print": {
                    //【特殊】布局流如何定位到中间某一张纸张的末尾打印；纸张高度上 剪掉 上面的一行 “目录” 并没有被本div所都囊括的元素高度：推定剪掉高度是2rem。A4纸张竖版大约可接受高度大小=775pt再换算=273.4mm；A4纸297mm-2*(11.7=边距+页眉页脚)；
                    //【有问题】目标div必须小于一张纸高度？这里若稍微超出了当前定位纸张区域，@@就可能被切分两页的！！，变成后续尾随空白页面的。所以尽量考虑有余量“- 10pt”:A4纸张竖版。
                    height: `calc(100vh - 2rem - 10pt)`,
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'center',   //'flex-end', 吸附本页纸张的底部区域打印，还是在本张纸张中间打印的？
                },
            } }>
                <div css={{
                    display: 'flex',
                    justifyContent: 'flex-end',
                }}>
                    <Text  css={{
                        [theme.mediaQueries.md]: {
                            marginRight: '2rem',
                        }
                    }}>报告编号：{rep.isp.no}
                    </Text>
                </div>
                <Table  fixed={ ["9%","%","12%","14%"]  }
                        printColWidth={ ["55","480","65","90"] }
                        css={ {borderCollapse: 'collapse',
                            height: `100pt`,
                        } }
                >
                    <TableBody>
                        <DirectLink  href={`/report/VS-DJ/ver/${verId}/${repId}/ProjectList`}>
                            <TableRow>
                                <CCell component="th" scope="row">序号</CCell>
                                <CCell>项目</CCell>
                                <CCell>页号</CCell>
                                <CCell>附页、附图</CCell>
                            </TableRow>
                        </DirectLink>
                        { orc?.Projects?.map((prj:any, i:number) => {
                                // /ProjectList?from=${i}
                                return  prj?.do && (
                                    <DirectLink key={i} href={`/report/VS-DJ/ver/${verId}/${repId}/ProjectList?from=${i}`}>
                                        <TableRow >
                                            <CCell component="th" scope="row">{muluSn++}</CCell>
                                            <Cell>{prj?.ml? prj?.ml : prj?.name+'报告'}</Cell>
                                            <CCell>{prj?.page}</CCell>
                                            <CCell>{prj?.apx}</CCell>
                                        </TableRow>
                                    </DirectLink>
                                );
                            })
                        }
                    </TableBody>
                </Table>
                <Text css={{textIndent: '2rem',display:'flex'}}>
                    注：出具记录时，从封面起必须按此序号顺序装订，未进行的检验项目则空缺。
                </Text>
            </div>
          <Text id={'Conclusion'} variant="h2" css={{textAlign:'center',
              "@media print": {
                  pageBreakBefore: 'always',
              },
          }}>压力容器定期检验结论报告</Text>

         <Table  fixed={ ["5%","15%","34%","16%","%"]  }
                printColWidth={ ["30","95","210","110","270"] }
                css={ {borderCollapse: 'collapse' } }
           >
         {检验设备情况({orc, repId:repId!, verId})}
        </Table>


        <Table  fixed={ ["11%","26%","9%","%"]  }
                printColWidth={ ["55","240","90","320"] }
                css={ {borderCollapse: 'collapse' } }
        >
          <TableBody>
              <TableRow>
                  <CCell component="th" scope="row">检查依据</CCell>
                  <CCell colSpan={3}>{orc.检查依据}</CCell>
              </TableRow>
              <TableRow >
                  <CCell component="th" scope="row">问题及其处理</CCell>
                  <Cell colSpan={3}><div css={{
                      minHeight: '9rem',
                  }}>{
                      multilines2Html(orc.问题及处理,  (txt,i)=>{
                          return <React.Fragment key={i}>{(i!==0)&&<br/>}<Text>{txt}</Text></React.Fragment>
                          } )
                  }</div></Cell>
              </TableRow>
            <DirectLink  href={`/report/VS-DJ/ver/1/${repId}/Conclusion`}>
                <TableRow  css={{
                    "@media print": {
                        pageBreakInside: 'avoid',
                    }
                }}>
                    <CCell component="th" scope="row" rowSpan={4}>检查结论</CCell>
                    <CCell >压力容器安全状况等级评定为</CCell>
                    <CCell colSpan={2}>{orc.安全状况等级}</CCell>
                </TableRow>
              <TableRow >
                  <CCell component="th" scope="row" rowSpan={2}>{orc.检验结论}</CCell>
                  <CCell colSpan={2}>允许（监控）使用参数</CCell>
              </TableRow>
              <TableRow>
                  <CCell colSpan={2} css={{padding:0}}>
                      <Table  fixed={ ["17%","33%","16%","16%","%"]  }
                              printColWidth={ ["50","110","70","50","130"] }
                              css={ {borderCollapse: 'collapse', height:'fill-available'} }
                      >
                          <TableBody>
                              <TableRow >
                                  <CCell>压力</CCell>
                                  <CCell>{orc.结论压力}</CCell>
                                  <CCell>MPa</CCell>
                                  <CCell>介质</CCell>
                                  <CCell>{orc.结论介质}</CCell>
                              </TableRow>
                              <TableRow >
                                  <CCell>温度</CCell>
                                  <CCell>{orc.结论温度}</CCell>
                                  <CCell>℃</CCell>
                                  <CCell>其它</CCell>
                                  <CCell>{orc.结论其它}</CCell>
                              </TableRow>
                          </TableBody>
                      </Table>
                  </CCell>
              </TableRow>
              <TableRow>
                  <CCell component="th" scope="row" >下次定期检验日期：</CCell>
                  <CCell colSpan={2}>{orc.下检日期}</CCell>
              </TableRow>
              <TableRow>
                  <CCell component="th" scope="row">说明</CCell>
                  <Cell colSpan={3}><div css={{
                      minHeight: '6rem',
                  }}>{
                      multilines2Html(orc.结论说明,  (txt,i)=>{
                          return <React.Fragment key={i}>{(i!==0)&&<br/>}<Text>{txt}</Text></React.Fragment>
                      } )
                  }</div></Cell>
              </TableRow>
            </DirectLink>

              <TableRow>
                  <CCell component="th" scope="row">检验人员</CCell>
                  <Cell colSpan={3}>{orc.检验人IDs}</Cell>
              </TableRow>
              <TableRow>
                  <CCell component="th" scope="row">编制</CCell>
                  <CCell>{orc.编制人}</CCell>
                  <CCell>{orc.编制日期}</CCell>
                  <CCell rowSpan={3}>
                      <div css={{
                          height:'8rem',
                          '::before': {
                              filter: 'opacity(30%)',
                              width: '100%',
                              height: '100%',
                              backgroundImage: `url(${Img_Seal})`,
                              content: '" "',
                              position: 'absolute',
                              top: 0,
                              left: 0,
                              backgroundRepeat: 'no-repeat',
                              backgroundPosition: 'center',
                          }
                      }}>
                          <Table  fixed={ ["40%","%"]  }
                                  printColWidth={ ["130","190"] }
                                  css={ {borderCollapse: 'collapse',height:'fill-available'} }
                          >
                              <TableBody>
                                  <TableRow>
                                      <CCell css={{border:'none'}}>机构核准证号：</CCell>
                                      <CCell css={{border:'none'}}>TS7110237-2026</CCell>
                                  </TableRow>
                                  <TableRow>
                                      <CCell css={{border:'none'}} colSpan={2}>（机构公章或检验专用章）</CCell>
                                  </TableRow>
                                  <TableRow>
                                      <CCell css={{border:'none'}}>签发日期：</CCell>
                                      <CCell css={{border:'none'}}>2020-04-22</CCell>
                                  </TableRow>
                              </TableBody>
                          </Table>
                      </div>
                  </CCell>
              </TableRow>
                <TableRow >
                  <CCell component="th" scope="row">审核</CCell>
                  <CCell></CCell>
                  <CCell>2020-01-02</CCell>
                </TableRow>
                <TableRow >
                  <CCell component="th" scope="row">批准</CCell>
                  <CCell></CCell>
                  <CCell>21154</CCell>
                </TableRow>
          </TableBody>
        </Table>
        <br/>
        <DirectLink  href={`/report/VS-DJ/ver/${verId}/${repId}/ProjectList`}>
          <Text variant="h2" css={{textAlign:'center'}}>压力容器定期检验报告附页</Text>
          <br/>
           <Table  fixed={ ["4%","41%","19%","%"]  }
                    printColWidth={ ["22","268","120","305"] }
                    css={ {borderCollapse: 'collapse' } }
            >
            <TableHead>
                <TableRow>
                    <CCell>序号</CCell>
                    <CCell>检验项目</CCell>
                    <CCell>检验结果</CCell>
                    <CCell>说明</CCell>
                </TableRow>
            </TableHead>
            <TableBody>
            {orc?.Projects?.length>0 ?
                <>{  orc.Projects.map((prj:any, i:number) => {
                        const fixedItemsz=VsProjects默认.length;
                        return (
                           <DirectLink key={i} href={`/report/VS-DJ/ver/${verId}/${repId}/ProjectList?from=${i}`}>
                            <TableRow >
                                <CCell component="th" scope="row">{i+1}</CCell>
                                <Cell><div css={{display: 'flex',alignItems: 'center'}}>
                                    {prj?.do? <IconCheckSquare size='sm'/> : <IconSquare size='sm'/>}&nbsp;{prj?.name}
                                </div></Cell>
                                <CCell>{prj?.res}</CCell>
                                <CCell>{prj?.memo}</CCell>
                            </TableRow>
                           </DirectLink>
                        );
                    })
                  }
               </>
                :
                <TableRow><CCell colSpan={4}>烦请首先初始化项目表！</CCell></TableRow>
            }
            </TableBody>
           </Table>
        </DirectLink>
          <br/>
          <Text id='InformationReview' variant="h2" css={{textAlign:'center'}}>压力容器资料审查报告</Text>
          <div css={{
              display: 'flex',
              justifyContent: 'space-between'
          }}>
              <Text  css={{
                  marginLeft: '2rem',
              }}>
                  单位内部编号：{orc.单位内部编号}
              </Text>
              <Text  css={{
                  marginRight: '2rem',
              }}>
                  报告编号：{rep.isp.no}
              </Text>
          </div>
              <Table  fixed={ ["9%","8%","17%","22%","8%","17%","%"]  }
                      printColWidth={ ["35","35","90","200","40","90","220"] }
                      css={ {borderCollapse: 'collapse' } }
              >
                  {资料审查设备({orc, repId:repId!, verId, rep})}
              </Table>

          <HashLinkObserver />

          <Text id="Structural" variant="h2" css={{textAlign:'center',marginTop: '1rem',
              "@media print": {
                  pageBreakBefore: 'always', marginTop: 'unset',
              },
          }}>压力容器宏观检验报告</Text>
          <div css={{
              display: 'flex',
              justifyContent: 'space-between',
              flexDirection: 'column',
              // ["@media print"]: {
              //     flexDirection: 'row',
              // },
              [theme.mediaQueries.md]: {
                  flexDirection: 'row',
              }
          }}>
              <Text  css={{
                  [theme.mediaQueries.md]: {
                      marginLeft: '2rem',
                  }
              }}>
                  单位内部编号：{orc.单位内部编号}
              </Text>
              <Text  css={{
                  [theme.mediaQueries.md]: {
                      marginRight: '2rem',
                  }
              }}>
                  报告编号：{rep.isp.no}
              </Text>
          </div>
          <Table  fixed={ ["9%","7%","33%","21%","%"]  }
                  printColWidth={ ["70","50","315","120","160"] }
                  css={ {borderCollapse: 'collapse' } }
          >
              <TableHead>
                  <DirectLink  href={`/report/VS-DJ/ver/${verId}/${repId}/ALL`}>
                      <TableRow>
                          <CCell>序号</CCell>
                          <CCell colSpan={2}>检 验 项 目</CCell>
                          <CCell>检查结果</CCell>
                          <CCell>备注</CCell>
                      </TableRow>
                  </DirectLink>
              </TableHead>
              <TableBody>
                <DirectLink  href={`/report/VS-DJ/ver/${verId}/${repId}/Structural`}>
                  <TableRow>
                      <CCell>1</CCell>
                      <CCell rowSpan={6}>结构检查</CCell>
                      <CCell>封头型式</CCell>
                      <CCell>{orc.封头型式}</CCell>
                      <CCell>{orc.封头型式_D}</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell>2</CCell>
                      <CCell>封头与筒体的连接</CCell>
                      <CCell>{orc.封筒连接}</CCell>
                      <CCell>{orc.封筒连接_D}</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell>3</CCell>
                      <CCell>开孔位置及补强</CCell>
                      <CCell>{orc.开孔补强}</CCell>
                      <CCell>{orc.开孔补强_D}</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell> 4 </CCell>
                      <CCell>纵（环）焊缝的布置及型式</CCell>
                      <CCell>{orc.焊缝布置}</CCell>
                      <CCell>{orc.焊缝布置_D}</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell>5</CCell>
                      <CCell>支承或者支座的型式与布置</CCell>
                      <CCell>{orc.支承型式}</CCell>
                      <CCell>{orc.支承型式_D}</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell>6</CCell>
                      <CCell>排放〈疏水、排污)装置的设置</CCell>
                      <CCell>{orc.排放设置}</CCell>
                      <CCell>{orc.排放设置_D}</CCell>
                  </TableRow>
                </DirectLink>
                <DirectLink  href={`/report/VS-DJ/ver/${verId}/${repId}/Geometric`}>
                  <TableRow>
                      <CCell>7</CCell>
                      <CCell rowSpan={5}>几何尺寸及焊缝检查</CCell>
                      <CCell>筒体同一断面上最大内径与最小内径之差</CCell>
                      <CCell><div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
                          <Text >{orc.大小内径差}</Text>
                          <Text css={{ [theme.mediaQueries.lg+', print']: {wordBreak: 'keep-all'} }}>
                                   mm</Text>
                      </div></CCell>
                      <CCell>{orc.大小内径差_D}</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell>8</CCell>
                      <CCell>纵（环）焊缝最大对口错边量</CCell>
                      <CCell><div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
                          <Text >{orc.对口错边量}</Text>
                          <Text css={{ [theme.mediaQueries.lg+', print']: {wordBreak: 'keep-all'} }}>
                                   mm</Text>
                      </div></CCell>
                      <CCell>{orc.对口错边量_D}</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell>9</CCell>
                      <CCell>纵（环）焊缝最大棱角度</CCell>
                      <CCell><div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
                          <Text >{orc.大棱角度}</Text>
                          <Text css={{ [theme.mediaQueries.lg+', print']: {wordBreak: 'keep-all'} }}>
                                   mm</Text>
                      </div></CCell>
                      <CCell>{orc.大棱角度_D}</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell>10</CCell>
                      <CCell>纵（环）焊缝最大咬边</CCell>
                      <CCell><div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
                          <Text >{orc.大咬边}</Text>
                          <Text css={{ [theme.mediaQueries.lg+', print']: {wordBreak: 'keep-all'} }}>
                                   mm</Text>
                      </div></CCell>
                      <CCell>{orc.大咬边_D}</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell>11</CCell>
                      <CCell>纵（环）焊缝最大余高</CCell>
                      <CCell><div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
                          <Text >{orc.大余高}</Text>
                          <Text css={{ [theme.mediaQueries.lg+', print']: {wordBreak: 'keep-all'} }}>
                                   mm</Text>
                      </div></CCell>
                      <CCell>{orc.大余高_D}</CCell>
                  </TableRow>
               </DirectLink>
               <DirectLink  href={`/report/VS-DJ/ver/${verId}/${repId}/Appearance`}>
                  <TableRow>
                      <CCell>12</CCell>
                      <CCell split rowSpan={10}>壳体外观检验</CCell>
                      <CCell>铭牌和标志</CCell>
                      <CCell>{orc.铭牌标志}</CCell>
                      <CCell>{orc.铭牌标志_D}</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell>13</CCell>
                      <CCell>内外表面的腐蚀</CCell>
                      <CCell>{orc.表面腐蚀}</CCell>
                      <CCell>{orc.表面腐蚀_D}</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell>14</CCell>
                      <CCell>裂纹、泄漏、鼓包、变形、机械接触损伤、过热</CCell>
                      <CCell>{orc.裂纹过热}</CCell>
                      <CCell>{orc.裂纹过热_D}</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell>15</CCell>
                      <CCell>工卡具焊迹、电弧灼伤</CCell>
                      <CCell>{orc.卡具焊迹}</CCell>
                      <CCell>{orc.卡具焊迹_D}</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell>16</CCell>
                      <CCell>法兰、密封面及其紧固螺栓</CCell>
                      <CCell>{orc.法兰密封}</CCell>
                      <CCell>{orc.法兰密封_D}</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell>17</CCell>
                      <CCell>支承、支座或者基础的下沉、倾斜、开裂</CCell>
                      <CCell>{orc.下沉倾斜}</CCell>
                      <CCell>{orc.下沉倾斜_D}</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell>18</CCell>
                      <CCell>地脚螺栓</CCell>
                      <CCell>{orc.地脚螺栓}</CCell>
                      <CCell>{orc.地脚螺栓_D}</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell>19</CCell>
                      <CCell>直立容器和球形容器支柱的铅垂度</CCell>
                      <CCell>{orc.支柱铅垂度}</CCell>
                      <CCell>{orc.支柱铅垂度_D}</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell>20</CCell>
                      <CCell>多支座卧式容器的支座膨胀孔</CCell>
                      <CCell>{orc.支座膨胀孔}</CCell>
                      <CCell>{orc.支座膨胀孔_D}</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell>21</CCell>
                      <CCell>排放（疏水、排污）装置和泄漏信号指示孔的堵塞、 腐蚀、沉积物</CCell>
                      <CCell>{orc.排放堵塞}</CCell>
                      <CCell>{orc.排放堵塞_D}</CCell>
                  </TableRow>
              </DirectLink>
               <DirectLink  href={`/report/VS-DJ/ver/${verId}/${repId}/InsulationLayer`}>
                  <TableRow>
                      <CCell>22</CCell>
                      <CCell rowSpan={3}>隔热层、衬里检验</CCell>
                      <CCell>隔热层破损、脱落、潮湿及层下腐蚀、裂纹</CCell>
                      <CCell>{orc.隔热破损}</CCell>
                      <CCell>{orc.隔热破损_D}</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell>23</CCell>
                      <CCell>衬里层的破损、腐蚀、裂纹、脱落及检查孔介质 流出情况</CCell>
                      <CCell>{orc.衬里流出}</CCell>
                      <CCell>{orc.衬里流出_D}</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell>24</CCell>
                      <CCell>堆焊层的龟裂、剥离和脱落</CCell>
                      <CCell>{orc.堆焊龟裂}</CCell>
                      <CCell>{orc.堆焊龟裂_D}</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell>25</CCell>
                      <CCell rowSpan={2}>其他检验</CCell>
                      <CCell>夹层真空度</CCell>
                      <CCell>{orc.夹层真空}</CCell>
                      <CCell>{orc.夹层真空_D}</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell>26</CCell>
                      <CCell>日蒸发率</CCell>
                      <CCell>{orc.日蒸发率}</CCell>
                      <CCell>{orc.日蒸发率_D}</CCell>
                  </TableRow>
                  <TableRow>
                      <Cell colSpan={5}><Text css={{ marginLeft: '2rem' }}>备注</Text><br/>
                          { multilines2Html(orc.宏观检验备注,  (txt,i)=>{
                              return <React.Fragment key={i}>{(i!==0)&&<br/>}<Text>{txt}</Text></React.Fragment>
                          } ) }</Cell>
                  </TableRow>
                  <TableRow>
                      <Cell colSpan={5}><Text css={{ margin: '0 2rem' }}>结果</Text>
                          {orc.宏观检验结果}。</Cell>
                  </TableRow>
               </DirectLink>
              </TableBody>
          </Table>
          <Text css={{ }}>注：检验结果栏中，打“√”表示该项目无问题或者合格，打“×”表示该项目有问题或者不合格，填写“无此项的表示实
              际没有的检验项目，划“－”表示该项目无法检验。</Text>

          <br/>
          <Text variant="h2" css={{textAlign:'center',
              "@media print": {
                  pageBreakBefore: 'always',
              },
          }}>安全附件检验报告</Text>
          <div css={{
              display: 'flex',
              justifyContent: 'space-between',
              flexDirection: 'column',
              [theme.mediaQueries.md]: {
                  flexDirection: 'row',
              }
          }}>
              <Text  css={{
                  [theme.mediaQueries.md]: {
                      marginLeft: '2rem',
                  }
              }}>
                  单位内部编号：{orc.单位内部编号}
              </Text>
              <Text  css={{
                  [theme.mediaQueries.md]: {
                      marginRight: '2rem',
                  }
              }}>
                  报告编号：{rep.isp.no}
              </Text>
          </div>
          <Table  fixed={ ["9%","7%","33%","21%","%"]  }
                  printColWidth={ ["70","50","315","120","160"] }
                  css={ {borderCollapse: 'collapse' } }
          >
              <TableBody>
                <DirectLink  href={`/report/VS-DJ/ver/${verId}/${repId}/SafetyValve`}>
                  <TableRow>
                      <CCell rowSpan={3}>安全阀</CCell>
                      <CCell>型号</CCell>
                      <CCell>{orc.安全阀型号}</CCell>
                      <CCell>数量</CCell>
                      <CCell>{orc.安全阀数量} 只</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell>校验日期</CCell>
                      <CCell>{orc.阀校验日}</CCell>
                      <CCell>校验记录编号</CCell>
                      <CCell>{orc.阀校验记录号}</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell>整定压力</CCell>
                      <CCell><div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
                          <Text >{orc.阀整定压力}</Text>
                          <Text css={{ [theme.mediaQueries.lg+', print']: {wordBreak: 'keep-all'} }}>
                                   MPa</Text>
                      </div></CCell>
                      <CCell>安装位置</CCell>
                      <CCell>{orc.阀安装位置}</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell rowSpan={3}>爆破片装置</CCell>
                      <CCell>型号</CCell>
                      <CCell>{orc.爆破片型号}</CCell>
                      <CCell>数量</CCell>
                      <CCell>{orc.爆破片数量} 个</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell>规格</CCell>
                      <CCell>{orc.片规格}</CCell>
                      <CCell>更换周期要求</CCell>
                      <CCell>{orc.片更换周期}</CCell>
                  </TableRow>
                  <TableRow>
                      <CCell>更换日期</CCell>
                      <CCell>{orc.片更换日 || '/'}</CCell>
                      <CCell>安装位置</CCell>
                      <CCell>{orc.片安装位置}</CCell>
                  </TableRow>
              </DirectLink>
              <DirectLink  href={`/report/VS-DJ/ver/${verId}/${repId}/QuickOpen`}>
                 <TableRow>
                      <CCell rowSpan={2}>快开门式压力容器安全联锁装置</CCell>
                      <Cell colSpan={4}>使用环境、校验周期、校验方法是否符合设计要求：</Cell>
                 </TableRow>
                  <TableRow>
                      <Cell colSpan={4}><div css={{
                          minHeight: '4rem',
                      }}>{  multilines2Html(orc.快开门联锁,  (txt,i)=>{
                              return <React.Fragment key={i}>{(i!==0)&&<br/>}<Text>{txt}</Text></React.Fragment>
                         } ) }</div></Cell>
                  </TableRow>
                  <TableRow>
                      <Cell colSpan={5}><div css={{ minHeight: '10rem' }}>
                          <Text css={{ margin: '0 2rem' }}>其他阀门、附件检验：</Text><br/>
                          {  multilines2Html(orc.其他阀门,  (txt,i)=>{
                              return <React.Fragment key={i}>{(i!==0)&&<br/>}<Text>{txt}</Text></React.Fragment>
                          } ) }
                      </div></Cell>
                  </TableRow>
               <TableRow>
                  <Cell component="th" scope="row" colSpan={5}><div css={{ minHeight: '10rem' }}>
                      <Text css={{ marginLeft: '2rem' }}>备注：</Text><br/>
                      {  multilines2Html(orc.备注,  (txt,i)=>{
                          return <React.Fragment key={i}>{(i!==0)&&<br/>}<Text>{txt}</Text></React.Fragment>
                      } ) }</div></Cell>
               </TableRow>
               <TableRow>
                  <Cell colSpan={5}><div css={{ minHeight: '5rem' }}>
                      <Text css={{ margin: '0 2rem' }}>检查结果：</Text><br/>
                      {  multilines2Html(orc.检查结果,  (txt,i)=>{
                          return <React.Fragment key={i}>{(i!==0)&&<br/>}<Text>{txt}</Text></React.Fragment>
                      } ) }。</div></Cell>
               </TableRow>
             </DirectLink>
          </TableBody>
      </Table>

     {orc?.Projects?.[4]?.do && orc?.Projects?.[4]?.name==='附加检验报告'  &&
       <>
       <Text id={'AdditionalTest'} variant="h2" css={{textAlign:'center'}}>附加检验报告</Text>
       <div css={{
           display: 'flex',
           justifyContent: 'space-between'
       }}>
           <Text  css={{
               marginLeft: '2rem',
           }}>
               单位内部编号：{orc.单位内部编号}
           </Text>
           <Text  css={{
               marginRight: '2rem',
           }}>
               报告编号：{rep.isp.no}
           </Text>
       </div>
       <Table  fixed={ ["17%","34%","17%","%"]  }
               printColWidth={ ["130","210","120","255"] }
               css={ {borderCollapse: 'collapse' } }
       >
           <TableBody>
               <DirectLink  href={`/report/VS-DJ/ver/${verId}/${repId}/AdditionalTest#AdditionalTest`}>
                   <TableRow>
                       <CCell colSpan={4}>导静电装置检查</CCell>
                   </TableRow>
                   <TableRow>
                       <CCell>测试仪器型号</CCell>
                       <CCell>{orc.静电测试仪器}</CCell>
                       <CCell>仪器精度</CCell>
                       <CCell>{orc.静电测试精度}</CCell>
                   </TableRow>
                   <TableRow>
                       <CCell>导静电电阻</CCell>
                       <CCell><div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
                           <Text >{orc.导静电电阻}</Text>
                           <Text css={{ [theme.mediaQueries.lg+', print']: {wordBreak: 'keep-all'} }}>
                                   Ω</Text>
                       </div></CCell>
                       <CCell>连接处电阻</CCell>
                       <CCell><div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
                           <Text >{orc.连接处电阻}</Text>
                           <Text css={{ [theme.mediaQueries.lg+', print']: {wordBreak: 'keep-all'} }}>
                                   Ω</Text>
                       </div></CCell>
                   </TableRow>
                   <TableRow>
                       <CCell colSpan={4}>绝热层真空度检查</CCell>
                   </TableRow>
                   <TableRow>
                       <CCell>真空仪型号</CCell>
                       <CCell>{orc.真空仪型号}</CCell>
                       <CCell>仪器精度</CCell>
                       <CCell>{orc.真空仪精度}</CCell>
                   </TableRow>
                   <TableRow>
                       <CCell>空载时真空度</CCell>
                       <CCell><div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
                           <Text >{orc.空载真空度}</Text>
                           <Text css={{ [theme.mediaQueries.lg+', print']: {wordBreak: 'keep-all'} }}>
                                   Pa</Text>
                       </div></CCell>
                       <CCell>承载时真空度</CCell>
                       <CCell><div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
                           <Text >{orc.承载真空度}</Text>
                           <Text css={{ [theme.mediaQueries.lg+', print']: {wordBreak: 'keep-all'} }}>
                                   Pa</Text>
                       </div></CCell>
                   </TableRow>
               </DirectLink>
           </TableBody>
       </Table>
         <Table  fixed={ ["13%","17%","17%","17%","13%","%"]  }
                   printColWidth={ ["110","135","110","140","100","120"] }
                   css={ {borderCollapse: 'collapse' } }
         >
               <TableBody>
                   <DirectLink  href={`/report/VS-DJ/ver/${verId}/${repId}/AdditionalTest`}>
                       <TableRow>
                           <CCell colSpan={6}>罐体抽真空 、气体置换</CCell>
                       </TableRow>
                       <TableRow>
                           <CCell>真空泵型号</CCell>
                           <CCell>{orc.真空泵型号}</CCell>
                           <CCell>抽真空时间</CCell>
                           <CCell><div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
                               <Text >{orc.抽真空时间}</Text>
                               <Text css={{ [theme.mediaQueries.lg+', print']: {wordBreak: 'keep-all'} }}>
                                   h</Text>
                           </div></CCell>
                           <CCell>罐内真空度</CCell>
                           <CCell><div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
                               <Text >{orc.罐内真空度}</Text>
                               <Text css={{ [theme.mediaQueries.lg+', print']: {wordBreak: 'keep-all'} }}>
                                   Pa</Text>
                           </div></CCell>
                       </TableRow>
                       <TableRow>
                           <CCell>置换介质</CCell>
                           <CCell colSpan={2}>{orc.抽空置换介质}</CCell>
                           <CCell>置换压力</CCell>
                           <CCell colSpan={2}><div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
                               <Text >{orc.抽空置换压}</Text>
                               <Text css={{ [theme.mediaQueries.lg+', print']: {wordBreak: 'keep-all'} }}>
                                   MPa</Text>
                           </div></CCell>
                       </TableRow>
                       <TableRow>
                           <CCell>排放后罐内压力</CCell>
                           <CCell colSpan={2}><div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
                               <Text >{orc.排放后压力}</Text>
                               <Text css={{ [theme.mediaQueries.lg+', print']: {wordBreak: 'keep-all'} }}>
                                   MPa</Text>
                           </div></CCell>
                           <CCell colSpan={2}>罐内气体含氧量</CCell>
                           <CCell>{orc.含氧量}</CCell>
                       </TableRow>
                   </DirectLink>
                   <DirectLink  href={`/report/VS-DJ/ver/${verId}/${repId}/Corrosive`}>
                       <TableRow>
                           <CCell colSpan={6}>腐蚀介质含量测定</CCell>
                       </TableRow>
                       <TableRow>
                           <CCell>介质名称</CCell>
                           <CCell colSpan={2}>{orc.腐蚀介质名称}</CCell>
                           <CCell>腐蚀介质成分</CCell>
                           <CCell colSpan={2}>{orc.腐蚀介质成分}</CCell>
                       </TableRow>
                       <TableRow>
                           <CCell>腐蚀介质含量</CCell>
                           <CCell><div css={{ display: 'flex',justifyContent: 'space-evenly',alignItems: 'center'}}>
                               <Text>{orc.腐蚀介质含量}</Text>
                               <Text css={{ [theme.mediaQueries.lg+', print']: {wordBreak: 'keep-all'} }}>
                                   %</Text>
                           </div></CCell>
                           <CCell>腐蚀速度</CCell>
                           <CCell><div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
                               <Text >{orc.腐蚀速度}</Text>
                               <Text css={{ [theme.mediaQueries.lg+', print']: {wordBreak: 'keep-all'} }}>
                                   mm/y</Text>
                           </div></CCell>
                           <CCell>腐蚀机理</CCell>
                           <CCell>{orc.腐蚀机理}</CCell>
                       </TableRow>
                       <TableRow>
                           <Cell colSpan={6}><Text css={{ margin: '0 2rem' }}>其他检验、检测：</Text></Cell>
                       </TableRow>
                       <TableRow>
                           <Cell colSpan={6}><div css={{ minHeight: '10rem' }}>
                               {  multilines2Html(orc.附加检验其他,  (txt,i)=>{
                                   return <React.Fragment key={i}>{(i!==0)&&<br/>}<Text>{txt}</Text></React.Fragment>
                               } ) }
                           </div></Cell>
                       </TableRow>
                       <TableRow>
                           <Cell colSpan={6}><Text css={{ marginLeft: '2rem' }}>备注：</Text></Cell>
                       </TableRow>
                       <TableRow>
                           <Cell component="th" scope="row" colSpan={6}  css={{height: '10rem',verticalAlign: 'baseline'}}>
                               {  multilines2Html(orc.附加检验备注,  (txt,i)=>{
                                   return <React.Fragment key={i}>{(i!==0)&&<br/>}{txt}</React.Fragment>
                               } ) }</Cell>
                       </TableRow>
                       <TableRow>
                           <Cell colSpan={6}><Text css={{ margin: '0 2rem' }}>检测结果：</Text></Cell>
                       </TableRow>
                       <TableRow>
                           <Cell colSpan={6}><div css={{ minHeight: '5rem' }}>
                               {  multilines2Html(orc.附加检测结果,  (txt,i)=>{
                                   return <React.Fragment key={i}>{(i!==0)&&<br/>}<Text>{txt}</Text></React.Fragment>
                               } ) }</div></Cell>
                       </TableRow>
                   </DirectLink>
               </TableBody>
         </Table>
       </>
     }

     { orc?.Projects?.[5]?.do && orc?.Projects?.[5]?.name==='壁厚测定' && renderThickmVs }
     { orc?.Projects?.[13]?.do && orc?.Projects?.[13]?.name==='光谱分析' && renderSpectrVs }

     {orc?.Projects?.[9]?.do && orc?.Projects?.[9]?.name==='衍射时差法（TOFD）超声检测' && renderTofd }
      </div>

      {末尾链接({template:'VS-DJ',verId, repId: repId||''})}
    </React.Fragment>
  );
}


//原来看到：容器定检主报告的 附页2实际可嵌套在壁厚测定报告后紧跟的做法（标记测厚位置和数据表放在图片上的方式）且检验人员签字可以2个人的。
